import React, { useState, useEffect } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import {
  Form, Input, Button, Table, 
} from 'antd';
import { UndoOutlined,} from '@ant-design/icons';
import {getUserList  } from '@/services/ant-design-pro/api';
import _ from 'lodash';
import styles from './index.less';


export default (): React.ReactNode => {
  const [form] = Form.useForm();
  const [, forceUpdate] = useState({});
  const [user, setUser] = useState([]);
  const [pagination, setPagination] = useState({ current: 1, page_size: 10, total: 0 });
  const [listLoading, setListLoading] = useState(false);
  const [searchVal, setSearchVal] = useState('TEST');
  /**
   * 获取楼盘列表
   */
  const queryUserList = async (params: any) => {
    try {
      setListLoading(true);

      const resp = await getUserList({ params: { ...params } });

      const list = _.get(resp, 'data.list', []);
      const page = _.get(resp, 'data.pagination', {});

      setUser(list);
      setPagination(page);
      setListLoading(false);
    } catch (err) {
      setListLoading(false);
      throw new Error(err);
    }
  };

  useEffect(() => forceUpdate({}), []);

  useEffect(() => {
    queryUserList(pagination);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const onFinish = (values: { text: string }) => {
    console.log('finish', values);
  };

  /**
   * 搜索框
   */
  const handleSearch = () => {
    const params = { user_name: searchVal, current: 1, page_size: 10 };
    queryUserList(params);
  };

  /**
   * 分页
   */
  const handlePageChange = (page: number, page_size?: number | undefined) => {
    const params = { current: page, page_size };
    queryUserList(params);
  };

  /**
   * 重置搜索
   */
  const handleResetSearch = () => {
    const params = { current: 1, page_size: 10 };
    queryUserList(params);
  };


  /**
   * table字段
   */
  const columns = [
    {
      title: '头像',
      dataIndex: 'head_portrait',
    },
    {
      title: '昵称',
      dataIndex: 'nickname',
    },
    {
      title: '手机号码',
      dataIndex: 'phone_number',
    },
    {
      title: '登录时间',
      dataIndex: 'log-in_time',
    },
    {
      title: '创建时间',
      dataIndex: 'creation_time',
    }
  ];
  return (
    <PageContainer>
      <div className={styles.search_content}>
        <Form form={form} name="search" layout="inline" onFinish={onFinish}>
          <Form.Item name="text" label="搜索：">
            <Input
              placeholder="请输入用户名称"
              value={searchVal}
              onChange={(e: React.FormEvent<HTMLInputElement>) => {
                setSearchVal(e.currentTarget.value);
              }}
            />
          </Form.Item>
          <Form.Item shouldUpdate>
            <Button type="primary" onClick={handleSearch}>
              {' '}
              搜索
            </Button>
          </Form.Item>
          <Form.Item>
            <Button icon={<UndoOutlined />} onClick={handleResetSearch}>
              {' '}
              重置{' '}
            </Button>
          </Form.Item>
        </Form>
      </div>

      <div className={styles.search_content}>
        <Table
          columns={columns}
          dataSource={user}
          pagination={{
            current: pagination.current,
            pageSize: pagination.page_size,
            total: pagination.total,
            onChange: handlePageChange,
          }}
          loading={listLoading}
          rowKey="phone_number"
        />
      </div>
    </PageContainer>
  );
};
